<script setup>
import {
  ChatDotSquare,
  Check,
  Close,
  Delete,
  Edit,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useChatMenuIdStore } from "../store/ChatMenuStore";
import { updChatMenu, delChatMenu } from "../services/chat";
import { bus } from "../mitt/mitt";
//store
const chatMenuIdStore = useChatMenuIdStore();
const emit = defineEmits();
const props = defineProps({
  menuItem: Object,
});
const editing = ref(false);
const inputValue = ref("");
const startEditing = function () {
  inputValue.value = props.menuItem.chatMenuName;
  editing.value = true;
};
const closeEditing = function () {
  editing.value = false;
};
const saveEditing = function () {
  let editChatMenuDto = {
    id: props.menuItem.id,
    chatMenuName: inputValue.value,
  };
  updChatMenu(editChatMenuDto)
    .then((res) => {
      props.menuItem.chatMenuName = inputValue.value;
      editing.value = false;
    })
    .catch((error) => {});
};
const del = function () {
  delChatMenu(props.menuItem.id)
    .then((res) => {
      emit("menu-item-updated", res.data);
      bus.emit("delChatMenu", "");
    })
    .catch((error) => {});
};

const clickChatMenuItem = function () {
  chatMenuIdStore.setChatMenuId(props.menuItem.id);
};
</script>
<template>
  <el-menu-item
    v-if="!editing"
    :index="menuItem.id"
    class="chat-menu"
    @click="clickChatMenuItem"
  >
    <div class="menu-input">
      <el-icon><ChatDotSquare /></el-icon>
      <el-popover
        placement="bottom"
        width="100"
        trigger="hover"
        :show-after="900"
        :content="menuItem.chatMenuName"
      >
        <template #reference>
          <span class="menu-input-span">
            {{ menuItem.chatMenuName }}
          </span>
        </template>
      </el-popover>
    </div>
    <div class="menu-icon">
      <el-icon class="edit" @click="startEditing"><Edit /></el-icon>
      <el-icon @click.stop="del" class="delete"><Delete /></el-icon>
    </div>
  </el-menu-item>
  <el-menu-item
    v-else
    :index="menuItem.id"
    :key="menuItem.id"
    class="chat-menu"
  >
    <div class="menu-input">
      <el-icon><ChatDotSquare /></el-icon>
      <el-input ref="input" v-model="inputValue" />
    </div>
    <div class="menu-icon">
      <el-icon @click="saveEditing" class="check"><Check /></el-icon>
      <el-icon @click="closeEditing" class="close"><Close /></el-icon>
    </div>
  </el-menu-item>
</template>

<style lang="less" scoped>
.check:hover {
  color: #fd0202;
}
.close:hover {
  color: #fd0202;
}
.delete:hover {
  color: #fd0202;
}
.edit:hover {
  color: #fd0202;
}

:deep(.el-input__inner) {
  border: none;
}
/*  */
.chat-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  .menu-input {
    display: flex;
    overflow: hidden;
    align-items: center;
  }
  .menu-input-span {
    display: flex;
    align-items: center; /* 让图标和文本垂直居中对齐 */
    flex-wrap: nowrap; /* 防止文本折行 */
    overflow: hidden;
    white-space: nowrap; /* 不换行 */
  }
}
// :deep(.el-dropdown-menu__item, .el-menu-item) {
//   padding: 0;
// }
</style>
